<template>
    <div class="slide" v-on:mouseover="stop()" v-on:mouseout="move()">
      <div class="slideshow">
        <transition-group tag="ul" name="image">
          <li v-for="(img, imgIndex) in imgArray" v-show="imgIndex===mark" :key="img">
            <a href="#">
              <img :src='img' :alt="'banner'+imgIndex">
            </a>
          </li>
        </transition-group>
      </div>
      <div class="bar">
        <span v-for="(item, itemIndex) in imgArray" :class="{ 'active':itemIndex===mark }" :key="item" @click="change(itemIndex)"></span>
      </div>
    </div>
</template>
<script>
export default {
  name: 'indexBanner',
  data () {
    return {
      bannerTimer: null, //定时器
      mark: 0, //比对图片索引的变量
      imgArray:[
        require('@/assets/images/bannerTest.jpg'),
        require('@/assets/images/bannerTest.jpg'),
        require('@/assets/images/bannerTest.jpg'),
        require('@/assets/images/bannerTest.jpg')
      ]
    }
  },
  methods: {
    autoPlay () {
      this.mark++;
      if (this.mark === 4) {
        this.mark = 0
      }
    },
    play () {
      this.bannerTimer = setInterval(this.autoPlay, 5000)
    },
    change (i) {
      this.mark = i
    },
    stop () {
      clearInterval(this.bannerTimer)
    },
    move () {
      this.bannerTimer = setInterval(this.autoPlay, 5000)
    }
  },
  created () {
    if (!this.imgArray) {
      
    }
    this.play()
  },
  destroyed (){
    this.stop()
  }

}
</script>
<style scoped>
  ul li{
    display: inline-block;
    width:750px;
    height:420px;
  }
  ul li a img{
    width:100%;
    height:100%;
  }

  .image-enter-active {
    transform: translateX(0);
    transition: all 1s ease;
  }
  .image-leave-active {
    transform: translateX(-100%);
    transition: all 1s ease;
  }
  .image-enter {
    transform: translateX(100%);    
  }
  .image-leave {
    transform: translateX(0);
  }
</style>
